<template>
    <view class="content">
        <van-popup position="bottom" @click-overlay="closePopup" :show="show" round closeable @close="closePopup"
            custom-style="width: 100%;background:#ffffff;overflow: hidden; ">
            <view class="popup-content">
                <view class="popup-main">
                    <view class="goodsDetail"> 确认收到了吗？ </view>
                    <view class="specs-box taste"> 当前商品还未签收，是否确认收货 </view>
                </view>
                <view class="btn-area">
                    <button  plain type="default" class="button" @click="reset">取消</button>
                    <button  type="warn" class="checkBtn" @click="confirmReceipt" :disabled="isSubmiting">{{ isSubmiting ? '提交中...' : '确定' }}</button>
                </view>
                <van-toast id="van-toast" />
            </view>
        </van-popup>
    </view>
</template>
<script>
import Toast from '@/wxcomponents/vant/toast/toast'

import {confirmReceiptApi} from '@/api/order'
export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        orderId: {
            type: String,
            default: () => ''
        }

    },
    data () {
        return {
            date: '',
            title: 'Hello',
            isSubmiting: false 
        }
    },
    onReady () {

    },
    methods: {

        // 关闭弹窗
        closePopup () {
            this.$emit('closeShouhuo')
        },

        reset () {
            this.closePopup()
        },
        // 确认收货
        async confirmReceipt () {
             // 如果正在提交，直接返回
             if (this.isSubmiting) {
                return
             } 
            // 标记为正在提交
            this.isSubmiting = true; 
            try {
                const res = await confirmReceiptApi(this.orderId);
                console.log(res);
                if (res.code == 200) {
                    // Toast('确认收货成功');
                    // this.$emit('confirmShouhuo');
                    Toast({
                        message: '已确认收货成功',
                        duration: 3000,
                    });
                    this.closePopup()
                    this.$emit('confirmShouhuo')
                    this.isSubmiting = false

                }else{
                    setTimeout(() => {
                        this.closePopup();
                    }, 3000);
                }
            } catch (error) {
                console.error('确认收货请求出错:', error);
            } finally {
                // 请求结束，无论成功失败都重置提交状态
                this.isSubmiting = false; 
            }
            
        }
    }
}
</script>
<style lang="scss" scoped>

// 最外层
.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: -2;
    scrollbar-width: none;
    /* 针对Firefox */
}

// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}

// 提示框
.popup-content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 24px;
    border-radius: 16px;
    overflow: hidden;
    // height:100vh;
    height: 100%;

    .popup-main {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        height: calc(100% - 30px);
        padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
    }

    .goodsDetail {
        text-align: center;
        // display: flex;
        // align-items: center;
        padding-bottom: 8px;
        width: 100%;
    }

    // 选规格   口味 重量 数量
    .specs-box {
        margin-top: 28px;
        text-align: center;
    }

}

.btn-area{
    display: flex;
    z-index: 100;
    justify-content: space-between;
    // padding: 0 24px;
    box-sizing: border-box;
}

.button{
    background-color: #Ffffff;
    border-radius: 38px;
    font-size:28rpx;
    text-align: center;
    color: #111111;
    height: 86rpx;
    line-height:86rpx;
    border: 1px solid #D4D4D4 !important;
    width: 45%;
}
.checkBtn{
    background-color: #FF6203;
    border: none;
    border-radius: 38px;
    font-size:28rpx;
    text-align: center;
    color: #FFFFFF;
    height:86rpx;
    line-height:86rpx;
    // padding-left: 35px;
    // padding-right: 35px;
    width: 45%;
}
// .button, .checkBtn{
//     // border: none;
// }
// .button[plain]{
//     border: 1px solid #D4D4D4;
// }
::v-deep .van-button--default {
    width: 100% !important;
    border: 1rpx solid #D4D4D4 !important;
}

</style>
